<template>
  <PageContainer title="个人信息">
    <!-- 具名插槽 位于页面右上角区域 -->
    <template #extra>
      <el-button type="primary" plain @click="editInfo">编辑信息</el-button>
    </template>

    <!-- 编辑个人信息组件 侧边栏 子组件编辑成功会通知父组件 调用successEdit更新页面 -->
    <EditInfo ref="editInfo" @successEdit="getTeacherInfo" :info="teacherInfo" :identify="currentUserIdentify" />

    <!-- 个人信息数据展示 -->
    <el-descriptions :column="3" border>
      <el-descriptions-item label="姓名">{{ teacherInfo.name }}</el-descriptions-item>
      <el-descriptions-item label="性别">{{ teacherInfo.sex }}</el-descriptions-item>
      <el-descriptions-item label="头像">
        <img v-if="teacherInfo.avatar" :src="teacherInfo.avatar" style="width: 78px;height: 118px;" alt="" />
        <p v-else>暂无头像</p>
      </el-descriptions-item>

      <el-descriptions-item label="学号">{{ teacherInfo.id }}</el-descriptions-item>
      <el-descriptions-item label="学院" :span="2">{{ teacherInfo.college }}</el-descriptions-item>

      <el-descriptions-item label="身份证号">{{ teacherInfo.card }}</el-descriptions-item>
      <el-descriptions-item label="手机号" :span="2">{{ teacherInfo.phone }}</el-descriptions-item>

      <el-descriptions-item label="居住地址">{{ teacherInfo.address }}</el-descriptions-item>
    </el-descriptions>
  </PageContainer>
</template>

<script>
import PageContainer from '@/components/PageContainer'
import EditInfo from '@/components/EditInfo.vue'
import common from '@/mixins/common'
import { getTeacherInfo } from '@/api/teacherInfo'

export default {
  name: 'ViewTeacherInfoPage', // 个人信息页面
  mixins: [common], // 混入的common中含有currentUserName currentUserIdentify
  components: {
    PageContainer,
    EditInfo
  },
  async created () {
    this.getTeacherInfo() // 创建页面后获取个人信息数据
  },
  data () {
    return {
      // 存放展示的个人信息
      teacherInfo: {
        id: '', // 教师的id
        name: '', // 姓名
        college: '', // 学院
        sex: '', // 性别
        avatar: '', // 头像图片
        phone: '', // 手机号
        card: '', // 身份证号
        address: '' // 地址
      }
    }
  },
  methods: {
    // 获取教师数据
    async getTeacherInfo () {
      const { data: { data } } = await getTeacherInfo()
      this.teacherInfo = data
    },
    // 编辑个人信息
    editInfo () {
      // 调用EditInfo组件的openDrawer()方法显示drawer
      this.$refs.editInfo.openDrawer()
    }
  }
}
</script>
